<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/10/2
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
</head>
<body>

    <div class="main">
        <h2>用户管理</h2>
        <div class="manage">
            <table  id="usertable" lay-filter="usertable">
                <script type="text/html" id="barDemo">

                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

                </script>

            </table>
        </div>
    </div>
    <div class="clear"></div>

</div>


    <form action="../UserModifyConfirmServlet" class="layui-form" style="display: none" id="moduser">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名(*)：</label>
            <div class="layui-input-inline">
                <input type="text"  name="id" class="layui-input"  style="display: none" />
                <input type="text"  name="loginname" class="layui-input"  lay-verify="required"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="username" class="layui-input"  lay-verify="required"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">登录密码(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input"  lay-verify="required"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="password1" class="layui-input"  lay-verify="required"/>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">性别(*)：</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男" lay-verify="required"  checked>
                <input type="radio" name="sex" value="0" title="女" lay-verify="required"  >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="identitycode" class="layui-input"  lay-verify="required|identity"  />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="email" class="layui-input"  lay-verify="required|email"  />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" class="layui-input" lay-verify="required|phone" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址(*)：</label>
            <div class="layui-input-inline">
                <input type="text" name="address" class="layui-input" lay-verify="required"  />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="button"  class="layui-btn" value="确认修改" lay-submit="" id="mod_btn"/>
            </div>
        </div>


    </form>

<div id="footer">
    Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>



<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    var $=layui.$;
    layui.use(["table",'layer'],function (){
        var table=layui.table;
        var layer=layui.layer;
        table.render({
            elem: '#usertable'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/user/all' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'loginname', title: '用户名', width:80, fixed: 'left'}
                ,{field: 'username', title: '真实姓名', width:150}
                ,{field: 'sex', title: '性别', width:80,templet:function (data){
                    return data.sex=="1"?'男':"女";

                    }}
                ,{field: 'email', title: '邮箱', width: 177}
                ,{field: 'mobile', title: '手机', width: 200}
                ,{field: 'address', title: '默认地址', width: 200}
                ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
            ]]
        });

        table.on('tool(usertable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url: "${pageContext.request.contextPath}/user/del",
                    data:{"id":data.id},
                    success :function (res){
                        alert(res.msg);
                        table.reload('usertable', {
                        });
                    }
                });
            } else if(layEvent === 'edit'){ //编辑
                $("input[name=id]").val(data.id);
                $("input[name=loginname]").val(data.loginname);
                $("input[name=username]").val(data.username);
                $("input[name=password]").val(data.password);
                $("input[name=password1]").val(data.password);
                $("input[name=identitycode]").val(data.identitycode);
                $("input[name=email]").val(data.email);
                $("input[name=mobile]").val(data.mobile);
                $("input[name=address]").val(data.address);
                layer.open({
                    type:1,
                    title:"修改用户信息",
                    content:$("#moduser")
                });

            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        $("#mod_btn").click(function (){
            var data=$("#moduser").serialize();
            $.post("${pageContext.request.contextPath}/user/update",data,function (res){
                alert(res.msg);
                table.reload('usertable', {
                });
            },"json");
        });

    });
</script>
</body>
</html>
